<template>
  <div class="mapLineConfig" :style="{ height: vh(props.data.style.height) + 'vh' }">
    <!-- 循环体 -->
    <div class="config" v-for="(item, index) in submitList">
      <!-- 选择 起点终点 -->
      <div class="bar up">
        <div class="bar-item">
          <div class="bar-item_label">起点</div>
          <div class="bar-item_select">
            <el-tree-select v-model="item.start" :data="areaOptions" :props="areaProps" check-strictly
              default-expand-all filterable clearable placeholder="请选择" size="small" />
          </div>
        </div>
        <div class="bar-item">
          <div class="bar-item_label">终点</div>
          <div class="bar-item_select">
            <el-tree-select v-model="item.end" :data="areaOptions" :props="areaProps" check-strictly default-expand-all
              filterable clearable placeholder="请选择" size="small" />
          </div>
        </div>
        <div class="bar-add" @click="addConfig" v-if="index == 0">添加</div>
        <div class="bar-add" @click="deleteConfig(index)" v-else>删除</div>
      </div>
      <!-- 选择 颜色 粗细 -->
      <div class="bar">
        <!-- 颜色配置 -->
        <div class="bar-item">
          <div class="bar-item_label">颜色</div>
          <div class="bar-item_color_select">
            <el-select v-model="item.color" size="small" placeholder="请选择颜色">
              <!-- 下拉列表项 -->
              <el-option v-for="item in colorOptions" :key="item.value" :label="item.label" :value="item.value">
                <el-tag :color="item.value" size="small" />
              </el-option>

              <!-- 选中显示内容，覆盖默认文字 -->
              <template #prefix>
                <el-tag v-if="item.color" :color="item.color" size="small" />
              </template>
            </el-select>
          </div>
        </div>
        <div class="bar-item line-bold_config">
          <div class="bar-item_label">粗细</div>
          <div>
            <el-radio-group v-model="item.line">
              <el-radio :value="line.value" v-for="(line, indexLine) in lineOptions">
                <div class="bar-item_line" :style="{ height: line.value + 'px', background: item.color }"></div>
              </el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="bar-foot">
      <div class="bar-btn" @click="takeSubmit">生效</div>
      <div class="bar-btn" @click="saveSubmit">保存生效</div>
    </div>
  </div>
</template>

<script setup lang="js">
import { onMounted, ref, inject } from "vue"
import { useDesign } from "@/hooks/use-design/use-design";
import { buildTree } from "@/utils/tool"
import { fetchMapLineAreaOptions } from "@/api/global"
import message from "@/utils/message";

const props = defineProps({
  barForm: { // 卡片查询表单
    type: Object,
    default: () => ({})
  },
  // 针对于mapLineConfig
  data: {
    default: () => ({
      cardId: "", //卡片id
      type: "", // 类型 echart/table/mapLineConfig
      url: "", // 接口地址
      style: {
        height: 200
      }, // 卡片主体样式
      config: {}, // 卡片配置
    })
  }
})

const areaProps = {
  label: "name",
  value: "districtId",
}

// 省市区选项
const areaOptions = ref([])

// 颜色选项
const colorOptions = [
  {
    value: '#E63415',
    label: 'red',
  },
  {
    value: '#FF6600',
    label: 'orange',
  },
  {
    value: '#FFDE0A',
    label: 'yellow',
  },
  {
    value: '#1EC79D',
    label: 'green',
  },
  {
    value: '#14CCCC',
    label: 'cyan',
  },
  {
    value: '#4167F0',
    label: 'blue',
  },
  {
    value: '#6222C9',
    label: 'purple',
  },
]

// 线条选项
const lineOptions = [
  { value: 3 },
  { value: 6 },
  { value: 9 }
]

// 提交数据
const submitList = ref([
  { start: "", end: "", color: "red", line: 3 }
])

// 定义调用最顶级组件方法
const callTopMethod = inject("callTopMethod")

onMounted(() => {
  initAreaOption()
})

// 添加配置
const addConfig = () => {
  let config = { start: "", end: "", color: "red", line: 3 }
  submitList.value.push(config)
}

// 删除配置
const deleteConfig = (index) => {
  submitList.value.splice(index, 1)
}

// 初始化省市区选项
const initAreaOption = async () => {
  const res = await fetchMapLineAreaOptions()
  if (res.data.length != 0) {
    areaOptions.value = buildTree(res.data)
  }
}

// 生效
const takeSubmit = () => {
  submit()
}

// 保存生效
const saveSubmit = () => {
  submit()
}

// 提交
const submit = () => {
  // 起点
  let isStartFlag = submitList.value.every(item => item.start != "")
  // 终点
  let isEndFlag = submitList.value.every(item => item.end != "")
  if (!isStartFlag || !isEndFlag) {
    message.default("起点和终点不能为空")
    return
  }
  callTopMethod && callTopMethod({ key: "测试" })
}

const { vw, vh } = useDesign()

</script>
<style scoped lang="scss">
.mapLineConfig {
  overflow-y: auto;

  :deep(.el-select .el-select__wrapper .is-hovering) {
    box-shadow: none !important;
  }

  :deep(.el-select .el-select__wrapper) {
    color: #bccbcc;
    box-shadow: none;
    background: rgb(18, 68, 87);
  }

  .bar-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: vh(50);
    margin-top: vh(10);

    .bar-btn {
      background: #B3DD4D;
      border-radius: vw(4);
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: vw(12);
      color: #000000;
      padding: vh(4) vw(13);
      margin-left: vw(12);
      cursor: pointer;
    }
  }

  .config {
    border-bottom: 1px solid rgba(255, 255, 255, 0.21);
    padding-bottom: vh(15);

    .up {
      justify-content: space-between;
    }

    .bar {
      display: flex;
      align-items: center;
      margin-top: vh(15);

      .line-bold_config {
        margin-left: vw(20);
      }

      .bar-item {
        display: flex;
        align-items: center;

        :deep(.el-radio) {
          margin-right: vw(5) !important;
        }

        .bar-item_label {
          width: vw(32);
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: vw(16);
          color: rgba(255, 255, 255, 0.8);
          margin-right: vw(10);
        }

        .bar-item_color_select {
          width: vw(80);

          // 只隐藏颜色选择器的 placeholder
          :deep(.el-select__placeholder) {
            display: none !important;
          }

        }

        .bar-item_select {
          width: vw(80);
        }

        .bar-item_line {
          width: vw(15);
        }
      }

      .bar-add {
        background: #245266;
        border-radius: vw(4);
        padding: vh(3) vw(10);
        color: #fff;
        font-size: vw(16);
        cursor: pointer;
      }
    }
  }

}
</style>